<template>
	<view>
		<!-- 选择支付方式S -->
		<uni-popup ref="payPopup" :maskClick="false">
			<view class="pay_popup-wrap">
				<view class="tit-wrap">
					<text>选择支付方式</text>
					<uni-icons @click="close" class="close-icon" type="close" color="#999" size="30"></uni-icons>
				</view>
				<view class="center-wrap">
					<view class="price">￥{{totalMoney}}</view>
					<view class="input-wrap" @click="handleChoosePayType('balance')">
						<view class="l-wrap">
							<view class="icon">
								<image src="../../static/imgs/icons/balance-icon.png" mode=""></image>
							</view>
							<text>余额</text>
						</view>
						<view class="r-wrap">
							<text class="num">￥{{balance}}</text>
							<uni-icons v-if="curPayType==='balance'" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
							<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
						</view>
					</view>
					<view class="input-wrap" @click="handleChoosePayType('wechat')">
						<view class="l-wrap">
							<view class="icon">
								<image src="../../static/imgs/icons/wechat-icon.png" mode=""></image>
							</view>
							<text>微信</text>
						</view>
						<view class="r-wrap">
							<uni-icons v-if="curPayType==='wechat'" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
							<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
						</view>
					</view>
					<!-- #ifdef H5 -->
					<view class="input-wrap" @click="handleChoosePayType('Alipay')">
						<view class="l-wrap">
							<view class="icon">
								<image src="../../static/imgs/icons/Alipay.png" mode=""></image>
							</view>
							<text>支付宝</text>
						</view>
						<view class="r-wrap">
							<uni-icons v-if="curPayType==='Alipay'" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
							<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="btn" @click="handleConfirmPay">确认支付</view>
			</view>
		</uni-popup>
		<!-- 选择支付方式E -->
		<keyBoard ref="keyBoard" @pay="payMoney" @closeK="closeK"></keyBoard>
	</view>
</template>

<script>
	import keyBoard from '@/components/common/common-keyBoard.vue'
	export default {
		components: {
			keyBoard
		},
		props: {
			price: {
				type: [Number, String]
			},
			orderInfo: {
				type: Object
			},
			orderType: { 
				type: [Number, String]
			}
		},
		data() {
			return {
				curPayType: 'wechat', // 当前支付方式：balance余额 | 微信wechat
				balance: 0,
			};
		},
		computed: {
			totalMoney() {
				return this.price
			}
		},
		created() {
			this.getUserBalance()
		},
		methods: {
			payMoney(pwd) {
				this.$emit('payMoney', pwd)
				if (false) {
					uni.navigateTo({
						url: '../../pages/order/success.order?id=1'
					});
				}
			},
			show() {
				this.$refs.payPopup.open()
			},
			close() {
				this.$refs.payPopup.close()
				this.$emit('cancle')
				this.$store.commit('delOrderPayType')
			},
			closeK() {
				this.$emit('closeK')
			},
			showKeyBoard() {
				this.$refs.keyBoard.show()
			},
			closeKeyBoard() {
				this.$refs.keyBoard.hide()
			},
			// 完成之后隐藏
			finishCloseKeyBoard() {
				this.$refs.keyBoard.finishHide()
			},
			handleChoosePayType(type) {
				this.curPayType = type
			},
			handleConfirmPay() {
				// #ifdef MP-WEIXIN
				if (this.curPayType === 'balance') { // 余额支付弹窗出支付密码
					this.getUserIsPwd()

				} else { // 微信支付
					let {
						orderNo,
						type
					} = this.orderInfo
					const payType = this.$store.getters.getOrderPayType
					if (payType == 'charteredAdd') { // 包车追加微信支付
						this.$http.get(this.$api.baoCheZhuiJia, {
							orderNo,
							type
						}).then(res => {
							console.log(res);
							if (res.code == 200) {
								let _this = this
								this.$store.commit('delOrderPayType')
								uni.requestPayment({
									provider: 'wxpay',
									...res.data,
									paySign: res.data.sign,
									signType: 'MD5',
									success(res) { // 微信支付成功就跳转详情
										// console.log('success:' + JSON.stringify(res));
										_this.$emit('wechatPaySuccess')
									},
									fail(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						})
					} else if (payType == 'carpoolAdd') { // 拼车追加支付
						this.$http.get(this.$api.pinCheZhuiJia, {
							orderNo,
							type
						}).then(res => {
							if (res.code == 200) {
								let _this = this
								this.$store.commit('delOrderPayType')
								uni.requestPayment({
									provider: 'wxpay',
									...res.data,
									paySign: res.data.sign,
									signType: 'MD5',
									success(res) { // 微信支付成功就跳转详情
										// console.log('success:' + JSON.stringify(res));
										_this.$emit('wechatPaySuccess')
									},
									fail(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						})
					} else if (payType == 'rentAdd') { // 租车追加支付
						let {
							money
						} = this.orderInfo
						this.$http.get(this.$api.zucheChaoshiUnifiedOrder, {
							orderNo,
							type,
							money
						}).then(res => {
							if (res.code == 200) {
								let _this = this
								this.$store.commit('delOrderPayType')
								uni.requestPayment({
									provider: 'wxpay',
									...res.data,
									paySign: res.data.sign,
									signType: 'MD5',
									success(res) { // 微信支付成功就跳转详情
										// console.log('success:' + JSON.stringify(res));
										_this.$emit('wechatPaySuccess')
									},
									fail(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						})
					} else {
						this.$http.get(this.$api.wechatPay, {
							orderNo,
							type
						}).then(res => {
							if (res.code == 200) {
								let _this = this
								uni.requestPayment({
									provider: 'wxpay',
									...res.data,
									paySign: res.data.sign,
									signType: 'MD5',
									success(res) { // 微信支付成功就跳转详情
										// console.log('success:' + JSON.stringify(res));
										_this.$emit('wechatPaySuccess')
									},
									fail(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						})
					}
				}
				// #endif

				// #ifdef H5
				if (this.curPayType === 'balance') { // 余额支付弹窗出支付密码
					this.getUserIsPwd()

				} else if (this.curPayType === 'wechat') { // 微信支付
					console.log(this.$api.unifiedOrder2);
					let {
						orderNo,
						type
					} = this.orderInfo
					this.$http.get(this.$api.unifiedOrder2, {
						orderNo,
						type
					}).then(res => {
						if (res.code == 200) {
							let _this = this
							let src = JSON.parse(res.msg)
							console.log(src);
							// location.href =  src.code_url
						}
					})

				} else if (this.curPayType === 'Alipay') { // 支付宝支付
					let {
						orderNo,
						type
					} = this.orderInfo
					const payType = this.$store.getters.getOrderPayType
					if (payType == 'charteredAdd') { // 包车追加支付宝支付
						this.$http.get(this.$api.baoCheZhuiJiaAlipay, {
							orderNo,
							type: 2
						}).then(res => {
							if (res.code == 200) {
								let _this = this
								this.$store.commit('delOrderPayType')
								location.href = res.data.link
							}
						})
					} else if (payType == 'carpoolAdd') { // 拼车追加支付
						this.$http.get(this.$api.pinCheZhuiJiaAlipay, {
							orderNo,
							type: 2
						}).then(res => {
							if (res.code == 200) {
								let _this = this
								this.$store.commit('delOrderPayType')
								location.href = res.data.link
							}
						})
					} else if (payType == 'rentAdd') { // 租车追加支付
						let {
							money
						} = this.orderInfo
						this.$http.get(this.$api.zucheChaoshiUnifiedOrderAlipay, {
							orderNo,
							type: 2,
							money
						}).then(res => {
							if (res.code == 200) {
								let _this = this
								this.$store.commit('delOrderPayType')
								location.href = res.data.link
							}
						})
					} else {
						this.$http.get(this.$api.unifiedOrderAlipay, {
							orderNo,
							type
						}).then(res => {
							if (res.code == 200) {
								let _this = this
								location.href = res.data.link
							}
						})
					}

					// this.$http.get(this.$api.unifiedOrderAlipay, {
					// 	orderNo,
					// 	type
					// }).then(res => {
					// 	if (res.code == 200) {
					// 		let _this = this;
					// 		console.log( res.data.link);
					// 		return
					// 		 location.href =  res.data.link
					// 	}
					// })
				}
				// #endif
			},
			getUserBalance() {
				this.$http.get(this.$api.getUserBalance).then(res => {
					if (res.code === 200) {
						this.balance = res.data.account
					}
				})
			},
			// 获取判断用户是否有设置支付密码
			getUserIsPwd() {
				this.$http.get(this.$api.checkCustomerPwd).then(res => {
					if (res.code == 200) {
						// this.close()
						this.$refs.payPopup.close()
						this.showKeyBoard()
					} else if (res.code == 2033) { // 没有设置密码
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesUser/editPayPwd?type=0'
							});
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pay_popup-wrap {
		width: 690rpx;
		margin: 0 auto;
		background-color: #fff;
		padding-bottom: 74rpx;
		border-radius: 12rpx;

		.tit-wrap {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			position: relative;
			font-size: 32rpx;
			border-bottom: 1px solid #EBEBEB;

			.close-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 20rpx;
			}
		}

		.center-wrap {
			display: flex;
			align-items: center;
			flex-direction: column;

			.price {
				padding: 40rpx 0 20rpx;
				font-size: 48rpx;
				color: $red;
			}

			.input-wrap {
				width: 630rpx;
				margin: 0 auto;
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				border-bottom: 1px solid #ebebeb;

				.l-wrap {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.icon {
						height: 48rpx;
						width: 48rpx;
						margin-right: 20rpx;
					}
				}

				.r-wrap {
					display: flex;
					align-items: center;

					.num {
						color: #666;
						font-size: 28rpx;
					}

					.choose-icon {
						margin-left: 20rpx;
					}
				}
			}
		}

		.btn {
			width: 600rpx;
			margin: 80rpx auto 0;
			height: 88rpx;
			line-height: 88rpx;
			background: $blue;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>
